Usando API de Google Search en el blog

API de Google search en el blog
La API de Google Search, te permite integrar el módulo de búsqueda de Google en tus páginas web o en este caso en tu blog.

Puedes probarlo a la izquierda de mi blog, teclea cualquier cosa y dale buscar.

A diferencia de la barra de búsqueda de Blogger, los resultados aparecen en tu misma página y no en otra aparte, una ventaja para que tus visitas no vayan a otro lado.
Para implementar este módulo de búsqueda, tienes que seguir los pasos que listo a continuación, se puede aplicar a cualquier página web, no solo a Blogger.
El código solo permite búsquedas en tu blog, pero se puede modificar para hacerlo que busque en la Web.

Leer +/-

01 Primero tienes que registrarte en Google AJAX search API, te asignan una "llave", la cual te permite usar el módulo en tu sitio, si no lo haces, te mostrará el error de "invalid API key supplied", este error también se muestra cuando le das "preview" a tu página.
Google utiliza esta "llave" para darle seguimiento al uso de la API
Copia la "llave" para utilizarla en el siguiente paso.


02 Ahora hay que poner en la sección de <head> el siguiente código:

<!--Google Search -->
<link href="http://www.google.com/uds/css/gsearch.css" type="text/css" rel="stylesheet"/>
<script src="http://www.google.com/uds/api?file=uds.js&v=0.1&key=xxxxxxxxxxxx" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">
//<![CDATA[

function OnLoad() {

// Create a search control
var searchControl = new GSearchControl();

// create a searcher options object
// set up for open expansion mode
// load a searcher with these options
var options = new GsearcherOptions();
options.setExpandMode(GSearchControl.EXPAND_MODE_OPEN);


// site restricted blog search
var blogSearch = new GblogSearch();
blogSearch.setUserDefinedLabel("En algun lugar");
blogSearch.setSiteRestriction("http://miguel_ps.blogspot.com");
searchControl.addSearcher(blogSearch, options);


// Tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementById("searchcontrol"));

// Execute an inital search
//searchControl.execute("Fotografo");
}

//]]>
</script>

En la línea donde dice key=xxxxxxxxxx, pegas la "llave" del punto uno.

Cambia las líneas siguientes con el título que quieres que aparezca y la dirección de tu blog, el título debe ser corto para que no ocupe dos líneas y se vea mal.

blogSearch.setUserDefinedLabel("En algun lugar");
blogSearch.setSiteRestriction("http://miguel_ps.blogspot.com");



03 Ahora en la sección de <style> debes colocar las siguientes líneas, esto nos permite resaltar en negrita los términos buscados y especificar el ancho de la columna de resultados.

<!-- Google Search -->
/* bold the section header */
.gsc-resultsRoot-siteSearch .gsc-title {
font-weight : bold;
}

/* the GSearchControl CSS Classes
* .gsc-control : the primary class of the control
*/
.gsc-control {
width: 200px;
}


Para cambiar el ancho solo cambia width: 200px; por el tamaño que necesitas, por default son 300 pixeles.


04 Cambia donde dice <body> a <body onload="OnLoad()">


05 Donde quieras que aparezca el cuadro de búsqueda inserta el siguiente código:

<div id="searchcontrol"/></div>


06 Si quieres realizar una búsqueda inicial quita las "//" de la siguiente línea y reemplaza "Fotografo" por el termino que quieres buscar.

//searchControl.execute("Fotografo");


Antes de guardar los cambios a tu plantilla, dale una vista previa para asegurarte de que todo va bien, te aparece un error de "invalid API key supplied", cuando publicas ya no aparece ( es por la dirección de la página en preview ).

Si todo se vé bien, guardas los cambios y vuelves a publicar tu blog.
Listo!


Cualquier duda o comentario estoy a tus órdenes.


Si deseas mayor información de la API de Google, consulta estos sitios:

Documentación Ejemplos


Update: Al ver este post en Internet Explorer mostraba un aviso de seguridad por la forma en que desplegaba el código en el marco en línea <iframe>, ya lo modifiqué para que no aparezca ningún aviso, cosas de Internet Explorer...

4 comentarios

Problemas

Problemas

Cómo enfrentar tus problemas uno a uno, si se niegan a ponerse en línea..


0 comentarios

Publicidad de Adsense II



Sigo haciendo pruebas con la publicidad, he estado leyendo el blog de Adsense y quiero poner en práctica sus consejos, dicen que este tipo de anuncios es mas efectivo, ahora voy a ver si se puede colocar el código dentro de un post.

De esa forma podría ser selectivo y solo mostrar publicidad cuando quiera que aparezca y no siempre.

De hecho estoy probando solo si se puede insertar código de Adsense en un post, también se puede insertar en los "feeds", que cosas, verdad?
Ahora podremos leer, ver y soñar con Adsense y como no tengo conejillos de indias con quienes probar, mis compañeros de oficina se niegan a prestarse a las pruebas, no entienden que es por el conocimiento y no por un beneficio personal... ;-)

Voy a poner algunas palabras clave para ver que sucede, por ejemplo, Técnicas de Photoshop, Tutoriales Photoshop, Flash y Dreamweaver.

Ahora esperaría ver un anuncio de Photoshop, cierto?
Bien, veamos si es así...

Leer +/-


Bueno, no apareció la publicidad como pensaba, pero si pude insertar el código de Adsense en un post.

1 | Tienes que crear una página Web y le pegas el código de Adsense que quieres mostrar, puedes usar HTML Kit para ello.

2 | La guardas en un servidor, yo utilicé el de Prodigy, pero puedes utilizar otro servicio de host.

3 | Donde quieres que aparezca la publicidad insertas el siguiente código:
<iframe width="310" height="260" frameborder="0" scrolling="no" src="http://www.paginasprodigy.com/slzinc/blog/bloggeradsense.html"></iframe>

Tienes que cambiar width y height para que quepa tu anuncio, yo utilicé un anuncio de 300 x 250, usé un marco un poco mas grande para que cupiera, donde dice src= pones la dirección de tu página web que guardaste en el punto dos.

Le das Preview a tu post y debe aparecer tu publicidad.


1 comentarios

Fotografía Submarina Espectacular

Fotografía Submarina Espectacular Esta es la galería de imágenes de los ganadores del 2006 Underwater Images, tiene unas imágenes submarinas espectaculares, todas ellas tiene derechos de autor, por supuesto, asi que, van a a tener que pasar a ver las fotografías al sitio.

Las fotografías están ordenadas por categorías y son realmente bellas, pocos sitios me han gustado tanto, este cabe dentro de la categoría de excepcional.

Fotografía Submarina Espectacular | Lo leí en

0 comentarios

Fotografías de nubes

Fotografías de nubesThe Cloud Appreciation Society tiene muchas fotografías de... nubes, las tiene clasificadas por Categorías y puedes ver Puestas de Sol, una categoría curiosa, nubes que parecen algo, ademas de otras con nombres mas técnicos, Cirrus, Stratus, AltoCumulus, pero que también se ven muy llamativas.

Inviertan un poco de tiempo y dejense maravillar con la belleza efímera de las nubes..

The Cloud Appreciation Society

0 comentarios

Brazo Mecánico - Juego

Brazo Mecánico
En este juego tienes que mover con las flechas un brazo mecánico, el objetivo es tomar el punto azul con el brazo y colocarlo sobre el punto blanco, bastante fácil, cierto?

Bueno, después el juego se complica un poco mas y no hay que tocar los objetos que rodean al punto azul.
A ver que tal les va, lo comparto con ustedes porque no quiero ser el único frustrado.. ;-)

Brazo Mecánico - Juego | Lo leí en

0 comentarios

Alternar publicidad de Adsense

Alternar publicidad de Adsense
En el blog oficial de Google Adsense, han publicado el código para alternar entre nuestros anuncios de Adsense, lo cual no tiene mucho de espectacular, lo notable es que Google Adsense ha permitido el uso de este código, ya que su política no permite hacerlo, pero en el post mencionan que tiene el visto bueno de los encargados.


Keep in mind that generally, modifying your ad code is against AdSense program policies. However, we've checked with our policy folks and they've given our publishers permission to modify the code for use with this specific script for the purposes of A/B testing.


Asi que, ahora, podrán ver a la izquierda arriba la publicidad con un fondo blanco o si son afortunados con un vistoso fondo verde azul.
Esta publicidad solo aparece en la página principal o en las páginas de cada mes, aquellas que seleccionas en Meses Anteriores.

La publicidad en la página de cada post es mas discreta, presiona Enlace ( al final de cada post ) para que la veas.
Ahora solo hay que esperar a que lleguen los miles de dolares por concepto de los clicks a la publicidad....

Si no llegan esos miles de dólares, tienes la ventaja que Google utiliza la información de Adsense para actualizar su buscador, interesante, no?

"Esto podría significar que aquellos usuarios que utilizan Adsense en sus sitios web serían mejor y más rapidamente indexados por Google, de forma que, aquellos a los que les cuesta aparecer en el buscador podrían poner anuncios en su sitio para ser indexados."

Alternar publicidad de Adsense

0 comentarios

Operan defraudadores en cajeros del DF

Operan defraudadores en cajeros del DF
Un grupo de venezolanos en grupos de tres o en parejas, aguarda dentro de los cajeros, para estafarte.
Cuando llegas al cajero y tecleas tu nip, te dicen que no funciona y pases al otro, lo que no te das cuenta, es que tu sesión aún está abierta, mientras el otro sujeto te distrae, sacan efectivo de tu cuenta.

En el enlace podrás ver el video explicando como operan.

Video | Lo leí en

0 comentarios

Probando Blogger in Beta

Probando Blogger in Beta
Ahora ya contamos con una nueva versión de blogger, la cual nos permitirá por fin, tener categorías para nuestros posts.

De momento, solo a algunos les aparece el enlace en el Dashboard para cambiarse, eventualmente podremos hacerlo todos.

Mario Patológico también ha publicado al respecto y ha creado un blog en la nueva versión de Blogger, Caso Papalogico.

Entre las nuevas características tendremos:

1 | Categorías usando etiquetas para nuestros posts.
2 | Podremos limitar los usuarios que leen nuestro blog en base a su correo electrónico, es decir, tener un blog privado.
3 | Será mas facil modicar los colores, tipos de letras y elementos de nuestra plantilla.

Este es mi nuevo blog blog de prueba en Blogger in Beta.

Si deseas probar esta nuevas características, crea una nueva cuenta en Blogger in beta y listo!

Update: Aquí pueden ver las capturas de pantalla de las nuevas funcionalidades, cortesía de Tony

Blogger in Beta

0 comentarios

Primer Post con Windows Live Writer

 Windows Live Writter Estuve leyendo por ahí acerca de Windows Live Writer, el cual es una aplicación que te permite publicar fuera de línea a varios sistemas de blogs, no solo al de Windows Live Spaces, también a Blogger, LiveJournal, TypePad, WordPress, entre otros.

Hasta ahora, todo bien, te permite ver el código HTML, o ver tu post como se vería tipo Web, insertar una imagen es sencillo, clásico de los programas de Windows, solo presionas un botón y te aparece como la quieres, si alineada a la derecha, a la izquierda o al centro, si quieres un tamaño pequeño, medio, etc.

Cómo es primer post, aún no sé si puede subir la imagen directamente a Blogger ( no, no se puede.. ), pero se puede configurar a que lo haga a un servidor ftp.

Puedes agregar una marca de agua, rotar, ajustar el brillo, además de otros efectos.

Aunque no se trajo mi plantilla para los posts, sería cuestión de diseñar una para Windows Live Writer.

También puedes insertar un mapa, solo que al momento de probarlo tardaba mucho y no lo puse.

| Writer Zone | Descargar Windows Live Writer |



Update:
1 | No incluyó las categorías, ya que no aparecen en el editor de Windows Live Writer
2 | A la imagen no se le pueden incluir los efectos si no la guardas directamente de WLW
3 | No apareció el Title para la imagen.

En términos generales es muy amigable para publicar, revisa la ortografía, incluye herramientas para insertar imágenes con efectos y mapas de manera muy sencilla.
Si no estás habituado a teclear directamente tu código HTML y tener control sobre él y solo deseas una forma sencilla de publicar, esta es una buena herramienta para ello.

0 comentarios

Necesitas inspirarte?

Necesitas inspirarte?
Si eres un programador/diseñador de páginas web, este sitio tal vez te sea de ayuda, recopila los últimos artículos publicados en diferentes sitios de diseño, programación, aprendizaje, etc.

Muy útil si necesitas un poco de inspiración, puedes ver los nuevos diseños de otros sitios y de repente te llega la iluminación de aquello que quieres para tu página web, esos nuevos estilos de menus, el diseño de las columnas, la combinación de colores, etc.

Además es un lugar que me gusta porque utiliza miniaturas para sus enlaces, aunque tardan un poco en cargarse, un preload le vendría bien.

Nota aparte, ahora estoy utilizando el formato png, para mis imágenes, por aquello de que es un formato no sujeto a patentes y que logra mayores niveles de compresión.

most inspired | Enviado por Pattsy

0 comentarios

Yo no voté por López Obrador

Yo no voté por López Obrador
Si tu votaste por López Obrador, respeto tu derecho a que lo hayas hecho así, si yo no voté por él, también respetarás mi derecho a no hacerlo?

Creo que entre personas civilizadas, que viven en una democracia y donde no todos pensamos igual, se requiere tolerancia para convivir unos con otros, en alguna parte leí:
"Tu derecho a agitar los brazos termina donde comienza mi nariz".

Sin embargo, Andrés Manuel López Obrador pareciera que no le importan los derechos de los demás, hoy leo una noticia mas acerca de él:
"Simpatizantes de López Obrador bloquean accesos a bancos mientras se inicia recuento de votos", me pregunto que pensaría López Obrador si le bloquearan sus cuentas, solo para manifestarnos en contra de él.

"Se divierte AMLO al estrangular el DF", y si bloquéaramos el acceso a su casa, le parecería divertido?

Además, ya dijo que solo si gana él estará conforme, entonces, tendrá caso hacer ese recuento, "Restan un voto a López Obrador en primer casilla".

Por lo pronto, solo quiero manifestar que, Yo no voté por López Obrador

0 comentarios

Tiempo improductivo?

Tiempo improductivo?
El día de hoy me detenía a pensar en que que había utilizado mi tiempo, sentí que no había aprovechado el día, solo me la pasé en Internet, leyendo las noticias, las novedades, los correos y arreglando una que otra cosa en la oficina.
Leer +/-

Y es que, es mas atractivo leer lo que aparece en tantos recopiladores de noticias, como este o este otro.
O puedes perder de una forma muy entretenida tu valioso tiempo viendo estas bellas imágenes.

Y es que todo esto resulta mas atractivo que leer esos manuales de bases de datos o los manuales para configurar el firewall.
Pero al final que queda, solo el conocimiento efímero de lo que es actual hoy y mañana ya no.

En el fondo sé que tengo que alejarme de todo esto e invertir en el conocimiento, en un descuido, vendré y publicaré.

0 comentarios

Mi nuevo blog

Mi nuevo blog
Esta es una lista de las cosas que tomaría en cuenta si inciara un nuevo blog, cosas que no haría, otras de las que me importaría poco y otras mas que debería hacer.

01 | La primera cosa que haría, sería quitar el caracter de subrayado en mi nuevo blog, no saben la de problemas que ha sido http://miguel_ps.blogspot.com, ya que no todos los sitios, programas o utilerías lo permiten, asi que he tenido que quedarme al margen de ellos.

02 | Publicaría de forma anónima, de esta forma no tengo que preocuparme que la gente que me conoce pueda usar lo que publico en mi contra, nunca falta alguien que quiera fastidiarte con lo que dices en tu blog, al que le quede el saco...

03 | El diseño de mi platilla sería líquido, para que se pueda adaptar a la resolución de la pantalla y olvidarme si se vé bien a 1024x768 y mal en 800x600.

04 | Publicaría sin ser políticamente correcto, es decir, sin preocuparme de que lo que escribo me ocasionará un alud de comentarios ofensivos, lo que pienso, lo diría y "bannear" a aquellos que me caen mal, es mi blog y puedo quitar los comentarios sin preguntar a nadie.

05 | En mi blog, yo escribo de lo que quiera, si es cursi, aburrido, insípido o lo que sea, que importa!! es mi blog y hago lo que quiera en él. Por eso yo tengo la contraseña y tú no! ( no me refiero a Borjamari...pero creo que le queda el saco )

06 | Me olvidaría del contador de visitas, si nadie me lee, cual es el problema? en realidad me gusta que me lean, solo que no me voy a obsesionar con el No de visitas, si quiero tener visitas solo tengo que escribir algo como que, me gusta "Microsoft Windows e Internet Explorer es el mejor" o algo por el estilo y de inmediato las huestes reinvidicadoras de las buenas costumbres te asaltan...

07 | Por favor, que alguien le ponga categorías a blogger! como sé que no pasara pronto, hay que ponerlas usando un método indirecto.

08 | Probaría cosas solo por el gusto de hacerlo, ya lo hago y me gustaría seguir haciéndolo en el nuevo.

09 | Me gustaría probar con Wordpress, solo para ver que tal, blogger ha sido muy flexible y he podido cambiar muchas cosas, pero me gustaría probar todas esas cosas que hay para Wordpress, asi que, a probar.

10 | Habilitar los comentarios de HaloScan, bloquea muy bien el spam y me gusta mas que el sistema de comentarios de blogger, no sé que tan práctico sea usarlo en Wordpress, pero ya veremos.

11 | No tengo que publicar a diario, no tengo que quedar bien con nadie, solo conmigo.

12 | No me preocuparía por estar actualizado, si ya salió hace dos semanas en otro blog, que problema tengo?...ninguno.

13 | Por último, vivir mas y bloguear menos!

0 comentarios

Miniaturas para tus enlaces III

Después de probar varios métodos, me quedo con una combinación de los anteriores que habíamos publicado.


Usamos el Javascript de aquí, es necesario descargar los archivos del código y la imagen, después tendremos que modificar algunas líneas.


En el archivo "arc90_linkthumb.js", donde dice:
m.src = 'http://msnsearch.srv.girafa.com/srv/i?s=MSNSEARCH&r='+ n;
Hay que cambiarla a:
m.src = 'http://webdesignbook.net/snapper.php?url='+ n + '&w=160&h=120';


En la sección de <head> de tu plantilla, hay que insertar el siguiente código:



Es importante cambiar la línea "http://myserver.com/path/to/javascript/arc90_linkthumb.js" para que apunte a donde almacenas tus archivos, también la línea "url(/tools/c/images/linkpic_shadow.gif)"



Los enlaces deben ir con class="linkthumb", ejemplo:
<a href="http://pattsy.blogspot.com" class="linkthumb" target="_self">El Blog de Pattsy</a>

De esta forma utilizamos las miniaturas generadas por Webdesign Reference Book, que por supuesto aparecen, ya que son generadas al momento, con la colocación de las imágenes del código Javascript.

El blog de Pattsy, Caso Patológico, Bolo, En algún lugar

Mi blog no aparece, quizás como consecuencia de utilizar un guión bajo en la dirección, después de esto, voy a escribir un post acerca de las cosas que no haría si empezara un nuevo blog...

0 comentarios

Miniaturas para tus enlaces II

Ahora estoy probando otra forma de poner miniaturas en los enlaces, este método utiliza CSS en lugar de código Javascript, además utiliza otro servicio para las miniaturas, el cual hasta ahora funciona bien.
El blog de PattsyPattsy
Caso PatológicoCaso Patológico
En algún lugarEn algún lugar

Lo que hace es generar una miniatura por medio del servicio de Webdesign Reference Book, este servicio crea una fotografía del sitio a 1024x768 y lo almacena en su servidor, después de 24 horas si alguien solicita la página, se genera una nueva fotografía, sino, devuelve la antigua.

Una vez generada la miniatura se oculta por medio de las hojas de estilo CSS, al pasar el mouse encima del enlace se muestra.
Bueno, se muestra pero en la esquina superior izquierda, habrá que modificar el CSS..
Ya modifiqué el CSS, pero no es muy eficiente que digamos, tal vez una combinación de ambos métodos sea lo ideal... aquí vamos a la versión III.

Miniaturas con CSS | Webdesign Reference Book

0 comentarios

Miniaturas para tus enlaces

Puedes poner Miniaturas para tus enlaces, agregando unas pocas líneas de código.

Al colocarte sobre un enlace se mostrará una pequeña miniatura del mismo, el enlace debe ir con class="linkthumb", ejemplo:
<a href="http://lab.arc90.com/2006/07/link_thumbnail.php" class="linkthumb" target="_self">Miniaturas</a>

Tendrás que agregar unas líneas a tu plantilla y cargar algunos archivos, pero sé que no tendrás problemas.
Voy a ver como se ven algunos sitios que visito:
Este es el blog de Pattsy y este otro el de Caso Patológico, ahora como se vé el de Algún Lugar, por aquello del ego...

Bueno, no están nuestras miniaturas.. :-(, a ver si se vé el de www.bloglines.com.
El de Bloglines si se vé, en el foro del sitio, sugieren que cambie en el script a otro servicio de miniaturas, voy a probar... ya lo hice y de todos modos no estamos...

Update: Si desean hacer lo mismo pero sin javascript, aquí lo pueden hacer solamente con CSS: Pop-up images on inline links

Me voy a cambiar mejor al estilo CSS, este es un enlace de prueba usando otro servicio de minaturas:
Pattsy

Muy bien, la imagen si aparece, en cuanto tenga oportunidad cambio todo a este nuevo procedimiento..!

Miniaturas para tus enlaces | Lo leí en

0 comentarios